<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/8/28
  Time: 9:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
    <title>应聘人信息</title>
    <!--引入layui框架的css样式-->
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px ">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="input1"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询" class="layui-btn">
            <input id="addBtn" type="button" value="新增" class="layui-btn">
        </div>
    </div>
</form>


<table id="pTable"></table>
<!-- 弹出窗口的模板 -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input  type="text" name="name" autocomplete="off" class="layui-input">
                    <input type="hidden" name="id"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-inline layui-input-wrap">
                    <input  type="text" name="age" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline layui-input-wrap">
                    <select id="sex" name="sex" autocomplete="off" class="layui-input">
                        <option value="女">女</option>
                        <option value="男" selected>男</option>
                    </select>
<%--                    <input type="text" name="sex" autocomplete="off" class="layui-input">--%>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-inline layui-input-wrap">

                    <input type="text" name="education" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input  type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input  type="button" id="saveBtn" value="保存" class="layui-btn">
            </div>
        </div>
    </form>

</script>
<!--表头编辑删除模板-->
<script id="template2" type="text/html">
    <input lay-event="edit" type="button" value="编辑" class="layui-btn layui-btn-xs">
    <input lay-event="delete"  type="button" value="删除" class="layui-btn layui-btn-xs layui-bg-red">
</script>
<script src="/layui/layui.js"></script>
<script>
    //告诉浏览器加载layui框架中哪些组件
    //加载完小组件就执行function
    layui.use(['table','layer','form'],function (){
        //console.log("123");
        //第一步：先对加载的组件起名字
        var table = layui.table;
        var layer = layui.layer;
        var $ =layui.jquery;
        var form =layui.form;




        //给查询按钮绑定事件
        $("#searchBtn").on("click",function (){
            //用js发起一个请求要一些数据回来，把数据插入到table中

            table.render({
                elem:"#pTable",//哪一个元素
                url:"/applicant?cmd=select",//发请求要数据
                cols:[[//表头属性
                    {title:"ID",field:"id"},
                    {title:"姓名",field: "name"},
                    {title:"年龄",field: "age"},
                    {title:"性别",field: "sex"},
                    {title:"学历",field:"education"},
                    {title:"申请时间",field:"createTime"},
                    {title:"操作",templet:"#template2"}
                ]],
                where:{name:$("#input1").val()},
                //分页操作
                page:true,
                //每页显示多少条
                limits:[5,10,20],
                limit:5
            });

        }).click();

        //给新增按钮绑定事件
        $("#addBtn").on("click",function(){
            layer.open({
                title:"新增应聘人",
                type:1,
                area:['400px','400px'],
                content:$("#template1").html()
            });

            $("#saveBtn").on("click",function (){
                //1.表单中数据都取出来
                var data = form.val("form1");
                console.log(data)
                if(!(data.name && data.age && data.sex && data.education)){
                    layer.msg("保存失败！请检查输入信息");
                    return false
                }
                //2.派一个人去发请求，把取出来的数据带上(Ajax)
                //第一个参数：请求地址
                //第二个参数：请求时传的数据
                //第三个参数；请求成功之后做什么，这个方法只有200成功时才执行
                data.cmd ="save";
                $.post("/applicant",data,function (){

                    //关窗口
                    layer.closeAll();
                    //给成功提示
                    layer.msg("保存成功");

                    //在查一遍数据（点一下查询按钮）
                    $("#searchBtn").click();


                });

            });
        });

        //给表格操作绑事件,使用表格里面table自带的
        table.on("tool",function(obj){
            var event =obj.event;
            var data = obj.data;//当前这一行的数据
            if(event === "edit"){//说明点了编辑
                //去后台获取当前这个商品的数据，取成功了在弹出
                $.get("/applicant?cmd=info&id="+data.id,function(applicant){
                    layer.open({
                        title:"编辑应聘人信息",
                        type:1,
                        area:['400px','400px'],
                        content:$("#template1").html()
                    });
                    //吧product对象放入form表单中
                    form.val("form1",applicant);
                    $("#saveBtn").on("click",function (){
                        //1.表单中数据都取出来
                        var data = form.val("form1");
                        console.log(data);
                        //2.派一个人去发请求，把取出来的数据带上(Ajax)
                        //第一个参数：请求地址
                        //第二个参数：请求时传的数据
                        //第三个参数；请求成功之后做什么，这个方法只有200成功时才执行
                        data.cmd ="save";
                        $.post("/applicant",data,function (){
                            //关窗口
                            layer.closeAll();
                            //给成功提示
                            layer.msg("保存成功");
                            //在查一遍数据（点一下查询按钮）
                            $("#searchBtn").click();

                        });

                    });
                });

            }
            if(event ==="delete"){//点了删除
                layer.confirm("您确定要删除这个应聘者吗？",function(){
                    $.post("/applicant",{cmd:"delete",id:data.id},function (){
                        layer.closeAll();//关闭窗口
                        $("#searchBtn").click();//点一下查询按钮
                    });
                },function(){})//确定执行第二个函数 取消执行第三个函数
            }
        });




    });
</script>
</body>
</html>

